<template>
  <div class="tabbar">
    <ul class="bar_box">
      <li
        class="bar_item"
        v-for="(i, k) in routerList"
        :key="k"
        @click="switchTab(i)"
      >
        <span :class="{active: route.path == i.path}">{{ i.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const routerList = ref([
  { title: "首页", path: "/" },
  { title: "商城", path: "/shopping" },
  { title: "直播", path: "/live" },
  { title: "我的", path: "/my" },
]);

const switchTab = (i) => {
  router.push({ path: i.path });
};
</script>

<style scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.25rem;
  background-color: #f1f1f1;
}
.bar_box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.bar_item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.4375rem;
  color: rgb(102, 102, 102);
}
.active {
  color: red;
}
</style>
